<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>3.细聊v-for</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo">
			<h2>v-for遍历数组</h2>
			<ul>
				<li v-for="g in games" :key="g.id">{{g.name}}</li>
			</ul>
			<hr>

			<h2>v-for遍历对象</h2>
			<ul>
				<li v-for="(value,key,index) in car">
					{{key}} - {{value}} - {{index}}
				</li>
			</ul>
			<hr>

			<h2>v-for遍历字符串</h2>
			<ul>
				<li v-for="(char,index) in str">
					{{char}} - {{index}}
				</li>
			</ul>

			<h2>v-for遍历指定次数</h2>
			<ul>
				<li v-for="(number,index,c,d) in n">
					{{number}} - {{index}}
				</li>
			</ul>
			<hr>

			<!-- v-for很“健壮”，如下写法均不会报错 -->
			<h3 v-for="a in undefined">哈哈</h3>
			<h3 v-for="a in null">哈哈</h3>
			<h3 v-for="a in true">哈哈</h3>
			<!-- 下面的NaN会报错 -->
			<!-- <h3 v-for="a in NaN">哈哈</h3> -->
		</div>

		<script type="text/javascript">
			new Vue({
				el:'#demo',
				data:{
					games:[
						{id:'gyut2176',name:'《王者荣耀》'},
						{id:'gyut2621',name:'《红色警戒》'},
						{id:'gyut2123',name:'《CS-Go》'},
						{id:'gyut2u89',name:'《羊了个羊》'},
					],
					car:{
						name:'奔驰C63',
						price:'70W',
						color:'灰色'
					},
					str:'欢迎来到尚硅谷！',
					n:9
				}
			})
		</script>
	</body>
</html>